<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar title="结业点评"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="toggle">
				<view class="toggle-li" :class="{'active':filters.isOk==0}" @click="toggleClick(0)">
					点评申请
				</view>
				<view class="toggle-li" :class="{'active':filters.isOk==1}" @click="toggleClick(1)">
					历史点评
				</view>
			</view>
			<view class="item-box" v-if="dataList.length>0">
				<view class="item" v-for="item in dataList" @click="toDetail(item)" :key="item.id">
					<view class="item-data">
						<view class="item-data-title">
							【{{item.gangwei}}】
						</view>
						<view class="item-data-line tag">
							<van-icon name="bookmark-o" color="#59a8ff" style="margin-right: 4upx;" />
							<text>{{item.school}}</text>-
							<text>{{item.school && item.major? '-'+item.major:item.major}}</text>
						</view>
						<!-- <view class="item-data-info">
							<text>工作形式：{{item.workType}}</text>
						</view> -->
						<view class="item-data-info">
							<!-- <text>工作时间：{{item.workTime}}{{item.jobStartDate? '至'+item.jobEndDate:''}}</text> -->
							<text>工作时间：{{(item.startTime?item.startTime.split(" ")[0]:'')+'至'+(item.endTime?item.endTime.split(" ")[0]:'')}}</text>
						</view>
						<view class="item-data-button" :class="{'success':!item.isOk}">
							{{item.isOk? '已点评':'去点评'}}
						</view>
					</view>
					<view class="item-user">
						<view class="item-user-picdir">
							<image :src="baseImage + item.avatar" mode="" v-if="item.avatar"></image>
							<image :src="baseImage + usual.seekerAvatar2" mode="" v-else-if="item.sex=='女'"></image>
							<image :src="baseImage + usual.seekerAvatar1" mode="" v-else></image>
						</view>
						<view class="item-user-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<empty v-else></empty>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {getRemarkList} from "@/core/web-api/qiyeduan.js"
	import Empty from "@/components/Empty.vue"
	export default {
		components:{
			Navbar,
			Empty
		},
		data() {
			return {
				dataList: [],
				bottomBtnHeight: uni.upx2px(90),
				page:{
					current:1,
					limit:10
				},
				filters:{
					isOk:0
				}
			}
		},
		methods: {
			/**
			 * 切换菜单
			 * @param {Object} active
			 */
			toggleClick(active) {
				if(active==this.filters.isOk) return;
				this.filters.isOk = active;
				this.page.current = 1;
				this.getDataList()
			},
			/**
			 * 跳转详情
			 * @param {Object} item
			 */
			toDetail(item){
				if(item.isOk==1){
					uni.navigateTo({
						url:"/pages/ucenter/qiyeduan/remark/detail?id=" + item.id
					})
				}else{
					uni.navigateTo({
						url:"/pages/ucenter/qiyeduan/remark/do?id=" + item.id
					})
				}
				
			},
			/**
			 * 去点评
			 * @param {Object} item
			 */
			toRemarkOn(item){
				if(item.isOk==1) return;
				
			},
			/**
			 * 加载数据
			 */
			getDataList(){
				getRemarkList({
					...this.page,
					...this.filters
				}).then(res=>{
					if(res.code==20000){
						let {total,list} = res.data;
						if(this.page.current==1){
							this.dataList = list;
						}else{
							this.dataList.push(...list)
						}
						this.total = total
					}
				})
			},
			/**
			 * 分页
			 */
			pageDataList(){
				if(this.total == this.dataList.length) return;
				this.page.current++;
			}
		},
		watch:{
			page:{
				deep:true,
				handler(){
					this.getDataList();
				}
			}
		},
		onReachBottom() {
			this.pageDataList();
		},
		onShow() {
			this.getDataList();
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage','imgUrl','usual'])
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

	}

	.toggle {
		display: flex;
		margin-top: 30upx;

		&-li {
			padding: 0 30upx;
			font-size: 24upx;
			color: #666666;

			&.active {
				font-size: 28upx;
				color: #000000;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					display: block;
					width: 62upx;
					height: 5upx;
					background-color: #708aff;
					position: absolute;
					left: 50%;
					margin-left: -31upx;
					bottom: -10upx;
				}
			}
		}
	}

	.item {
		&-box {
			width: 100%;
			margin-top: 36upx;
			position: static;
			z-index: 2;
		}

		margin-bottom: 40upx;
		width: 100%;
		border-radius: 20upx;
		background-color: #fff;
		padding:30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		display: flex;

		&:last-child {
			margin-bottom: 0;
		}

		&-data {
			flex: 1;
			padding-right: 20upx;
			box-sizing: border-box;

			&-title {
				font-size: 30upx;
				color: #000000;
				font-weight: bold;
				margin-bottom: 6upx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 使用省略号表示超出部分 */
			}

			&-line {
				display: flex;
				align-items: center;

				text {
					font-size: 24upx;
					color: #4d4d4d;

				}

				&.tag {
					margin-bottom: 6upx;
				}
			}

			&-info {
				line-height: 28upx;
				text {
					font-size: 22upx;
					color: #808080;
				}
			}

			&-button {
				margin-top: 10upx;
				
				box-sizing: border-box;
				width: 136upx;
				height: 42upx;
				font-size: 24upx;
				border-radius: 10upx;
				text-align: center;
				line-height: 42upx;
				background-color: #ccc;
				color: #666;
				&.success{
					background: linear-gradient(to bottom, #5472fd, #6ca5fd);
					color: #ffffff;
				}
			}
		}

		&-user {
			display: flex;
			flex-direction: column;
			align-items: center;

			&-picdir {
				width: 118upx;
				height: 118upx;

				image {
					width: 118upx;
					height: 118upx;
					border-radius: 50%;
				}
			}

			&-name {
				margin-top: 10upx;
				font-size: 30upx;
				color: #4d4d4d;
			}
		}
	}
</style>